<template>
    <div v-loading="loading">
        <el-form ref="formRef" :model="formData" label-width="150px">
            <el-card shadow="never" class="!border-none">
                <el-form-item label="ICP备案号：" prop="icp">
                    <div class="w-80">
                        <el-input v-model.trim="formData.icp" placeholder="请输入ICP备案号" />
                        <div class="el-form-tips">在H5和PC端底部显示</div>
                    </div>
                </el-form-item>
                <el-form-item label="ICP备案跳转链接：" prop="icp_url">
                    <div class="w-80">
                        <el-input v-model.trim="formData.icp_url" placeholder="请输入ICP备案跳转链接" />
                        <div class="el-form-tips">在H5和PC端底部显示，不配置则不跳转</div>
                    </div>
                </el-form-item>
                <el-form-item label="网安备案：" prop="pcp">
                    <div class="w-80">
                        <el-input v-model.trim="formData.pcp" placeholder="请输入网安备案" />
                        <div class="el-form-tips">公安部门登记的备案信息，在pc端底部显示</div>
                    </div>
                </el-form-item>
                <el-form-item label="网安备案跳转链接：" prop="pcp_url">
                    <div class="w-80">
                        <el-input v-model.trim="formData.pcp_url" placeholder="请输入网安备案跳转链接" />
                        <div class="el-form-tips">在PC端底部显示，不配置则不跳转</div>
                    </div>
                </el-form-item>
            </el-card>
        </el-form>
        <footerSubmit>
			<el-button v-auth="'setting/setWebRecord'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
    </div>
</template>

<script lang="ts" setup name="systemRecord">
import { ref, reactive, onMounted } from 'vue';
import { getWebRecord, setWebRecord } from '/@/api/setting/webset';
import { messageSuccess } from '/@/utils/message';

const formRef = ref(null);

const loading = ref(true);

// 表单数据
const formData = reactive({
    icp: '', // ICP备案
    icp_url: '', // ICP备案链接
    pcp: '', // 网安备案
    pcp_url: '', // 网安备案链接
});

// 获取数据
const getData = async () => {
    const data = await getWebRecord();
    for (const key in formData) {
		if(data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
    }
    loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
    await formRef.value?.validate();
    await setWebRecord(formData);
    messageSuccess('设置成功');
    getData();
};

onMounted(() => {
	getData();
});
</script>